<template>
  <div>
    <div class="box">
      <div>
        <div class="text-right">
          <el-select v-model="labelValue" placeholder="全部" clearable @change="onLoad" @clear="onLoad">
            <el-option
                v-for="item in questionLabel"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <div class="input">
            <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="searchWord" @input="onLoad">
            </el-input>
          </div>
          <el-button type="primary" @click="askQuestion">提问</el-button>
        </div>

        <div style="min-height: 500px">

          <section v-for="(item,index) in questionList" :key="index" @click="todetail(item)">
            <div class="title">
              <span style="font-size: 20px"> {{ item.title === null ? '暂无标题' : item.title }}</span>

              <header><span>{{ item.isAnonymous == 0 ? item.studentName : '匿名提问' }}</span><span>{{
                  questionLabel[item.label].label
                }}</span></header>
            </div>
            <div class="time">{{ item.createTime }}</div>
            <div style="padding-bottom: 20px">
              <p>
                <!--            <span >...查看全文</span>-->
                {{ item.content }}
              </p>
            </div>

            <div v-if="item.replyList.length>0">
              <div>{{ item.replyList[0].replyName }}</div>
              <p>{{ item.replyList[0].content }}</p>
            </div>
            <div v-else>
              <div>暂无回复</div>
            </div>

          </section>
        </div>
        <div class="changePage">
          <el-pagination
              background
              prev-text="上一页"
              next-text="下一页"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="prev, pager, next, jumper"
              :total="total">
          </el-pagination>


        </div>
      </div>
      <!-- 提问-->
      <el-dialog
          title="发表提问"
          :visible.sync="dialogVisible"
          width="540px"
          :before-close="handleClose">
        <div class="text-left">选择标签：
          <el-select v-model="selectedLabel" placeholder="请选择">
            <el-option
                v-for="item in questionLabel"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <span style="float:right;">
             <el-checkbox v-model="checked">匿名</el-checkbox>
          </span>
        </div>
        <div class="text-left title">
          <span>输入标题：</span>
          <span>
            <el-input v-model="submitTitle" placeholder="请输入标题" clearable></el-input>
          </span>
        </div>
        <div>
          <el-input
              type="textarea"
              :rows="8"
              maxlength="500"
              :show-word-limit="true"
              placeholder="请输入内容"
              v-model="textarea">
          </el-input>
        </div>
        <div class="send">
          <el-button type="primary" round @click="submitQuestion">发布</el-button>
        </div>
      </el-dialog>

    </div>

    <indexBottom></indexBottom>
  </div>
</template>

<script>
import indexBottom from "../../components/indexBottom";
import {mapState} from "vuex";
import {getQuestionList,subQuestion} from "../../api/answer/index";

export default {
  name: "answerQuestions",
  components: {
    indexBottom
  },
  created() {
    this.onLoad();
  },
  computed: {
    ...mapState({
      questionLabel: state => state.dict.dictTree.question_label['arr'],
    })
  },
  data() {
    return {
      labelValue: '',
      selectedLabel: '',
      searchWord: "",
      dialogVisible: false,
      currentPage: 1,
      pageSize: 5,
      total: 0,
      questionList: [],
      checked: true,
      input: "",
      submitTitle:'',
      textarea: '',
    }
  },
  methods: {
    onLoad() {
      let obj = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        label: this.labelValue,
        content: this.searchWord
      }
      //查询疑问列表
      getQuestionList(obj).then(res => {
        console.log(res)
        this.questionList = res.rows
        this.total = res.total
      })
    },
    todetail(item) {
      console.log(item)
      this.$router.push(
          {
            path: '/answerQuestionsDetail',
            query: {
              id: item.id,
            }
          })
    },
    //提问弹框
    askQuestion() {
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val
      // this.currentPn=this.pageSize*(this.currentPage-1)+1
      this.onLoad()
    },
    submitQuestion() {
      console.log(this.checked)
      console.log(this.selectedLabel)
      console.log(this.submitTitle)
      console.log(this.textarea)
      if(this.selectedLabel===''){
        this.$message.error("请选择一个标签")
        return
      }
      if(this.submitTitle===''){
        this.$message.error("请填写标题")
        return
      }
      if(this.textarea===''){
        this.$message.error("请填写内容")
        return
      }
      let obj={
        content:this.textarea,
        label:this.selectedLabel,
        title:this.submitTitle,
        isAnonymous:this.checked?1:0
      }
        subQuestion(obj).then(res=>{
          console.log(res)
        })
    },

  }
}
</script>

<style scoped lang="less">
/deep/ .el-button.is-round {
  padding: 12px 50px;
}

.send {
  margin-top: 20px;
}

.title {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;

  span:nth-of-type(2) {
    flex-grow: 1;
  }
}

/deep/ .el-dialog__title {
  color: #66b1ff;
}

.text-right {
  padding-top: 60px;
  margin: 20px 0;
}

section {
  color: rgba(48, 48, 48, 1);
  text-align: left;
  margin: 20px 0;
  padding: 20px;
  border-radius: 10px;
  background: white;

  .title {
    margin-bottom: 10px;

    header {
      float: right;

      span {
        font-size: 14px;
        color: #aaa;
        margin-right: 20px;
      }

      span:nth-of-type(2) {
        color: #66b1ff;
      }
    }
  }

  .time {
    color: #aaa;
    font-size: 14px;
  }

  p {
    margin: 20px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    position: relative;

    span {
      position: absolute;
      width: 200px;
      right: 0px;
      bottom: 0px;
      color: #66b1ff;
      background: white;
      cursor: pointer;
    }
  }
}

.input {
  display: inline-block;
  width: 220px;
  margin: 0 20px;
}

.changePage {
  text-align: right;
  padding-bottom: 20px;
}
</style>
